<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #outer {
            width: 500px;
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        
        #div1 {
            width: 100px;
            height: 100px;
            background: pink;
            margin: 10px auto;
        }
    </style>

</head>

<body>
    <div id="outer">
        <input type="button" value="宽" />
        <input type="button" value="高" />
        <input type="button" value="换色" />
        <input type="button" value="消失" />
        <input type="button" value="重新" />
        <div id="div1"></div>
    </div>
</body>

</html>


<script>
    var bianse = function(elem, attr, value) {
        elem.style[attr] = value;
    }
    var fds = document.getElementsByTagName("input");
    var f = document.getElementById("div1");
    var d = ["width", "height", "background", "display", "display"];
    var s = ["200px", "200px", "plum", "none", "block"];
    for (var i = 0; i < fds.length; i++) {
        fds[i].index = i;
        fds[i].onclick = function() {
            this.index == fds.length - 1 && (f.style.cssText = "");
            bianse(f, d[this.index], s[this.index]);
        }
    }
</script>